<template>
	<view class="context">
		<view class="tit">{{title}}</view>
		<view class="tab-box">
			<view class="tab-l-box" v-for="(item ,index) in tabList" :key="index" @click="onTabList(item,index)">
				<view class="item">{{item.title}}</view>
				<view class="line" v-show="index == curTabIndex"></view>
			</view>
		</view>
	
		<view class="swiper-box" v-for="(item,index) in detailList" :key="index">
			<view class="del-btn" @click="del(item,index)">
				<image src="../../static/images/close-01.png"></image>
			</view>
			<addPhoto :ref="'addPhoto' + index" :actType="2" :pList="item.list" :parentIdx="index" :tabId="tabId"></addPhoto>
			<textarea class="text-area" 
					  :placeholder="placeholder" 
					  v-model="item.desc"
			          placeholder-style="font-size:13px;color:#aaa" 
					  auto-height="true" 
					  maxlength="3000">
			</textarea>
		</view>
		<view class="icon-font add-btn" @click="pushDetail()"> &#xe606; {{btnTxt}}</view>
	</view>
</template>

<script>
	import addPhoto from "../comm/AddPhoto.vue";
	import goodsCtrl from "../../js/gd/GoodsCtrl.js";
	import lang from "../../js/conf/Lang.js";
	import uploadPic from "../../js/upload/UploadPic.js";
	export default
	{
		components:{addPhoto},
		data()
		{
			return{
				tabList : [],
				curTabIndex:-1,
				title : lang.moreDetailTxt.title,
				placeholder : lang.moreDetailTxt.placeholderTxt,
				btnTxt : lang.moreDetailTxt.btnTxt,
				detailList : [],
				tabId:"",
			}
		},
		methods:{
			onTabList(item,index)
			{
				if( this.curTabIndex == index ) return;
				this.curTabIndex = index;
				this.tabId = item.id;
				this.getPhotoTxt(item);
			},
			
			/****添加一个图文块****/
			pushDetail()
			{
				console.log('111',this.detailList);
				let obj = this.tabList[this.curTabIndex];
				this.detailList = goodsCtrl.addGdMoreDetailPhoTxt(obj);
			},
			
			/** 初始化数据 **/
			initData()
			{
				 this.tabList = goodsCtrl.initGdMoreTab();

				 if(this.tabList)
				 {
					this.curTabIndex = 0;
					let item = this.tabList[this.curTabIndex];
					if(item)
					{
						this.tabId = item.id;
						this.getPhotoTxt(item);
					}
				 }
			},
			
			getPhotoTxt(item)
			{
				this.detailList = goodsCtrl.getGdMoreDesc(item.id);
				if(!this.detailList)
				{
					this.detailList = goodsCtrl.addGdMoreDetailPhoTxt(item);
				}
				console.log('this.detailList==============>',this.detailList);
				this.$forceUpdate();
			},
			
			confirm(data)
			{
				// console.log("tempFilePath========================:",data.tempFilePath)
				uploadPic.creatCanvas(data.tempFilePath,data.original);
				// data.tabId = this.tabId;
			},
			
			/****删除一个图文块****/
			del(item,index)
			{
				this.detailList = goodsCtrl.delGdMoreDetailPhoTxt(item.id,index);
			},
			
			/*****删除图文块里某张图*****/
			delPhoto(data)
			{
				
			}
		}
	}
	
</script>

<style lang="scss">
	.context
	{
		padding: 10px 0;
		font-size: 13px;
		width: 100%;
		.tit
		{
			font-weight: bold;
		}
		.tab-box
		{
			display: flex;
			.tab-l-box
			{
				padding: 0 10px;
				cursor: pointer;
				.line
				{
					width: 20px;
					margin: 0 auto;
					border-bottom: 2px solid #3388FF;
				}
			}
		}

		.swiper-box
		{
			border: 1px solid #ECECEC;
			width: calc(100% - 20px);
			margin-top: 10px;
			padding: 10px;
			position: relative;
			margin-bottom: 10px;
			.del-btn
			{
				width: 15px;
				height: 15px;
				position: absolute;
				right: 10px;
				
				cursor: pointer;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
			.text-area
			{
				height: 150px;
				width: calc(100% - 20px);
				border: 1px solid #ECECEC;
				padding: 10px;
			}
		}
		.add-btn
		{
			font-size: 13px;
			color: #3388ff;
			border: 1px solid #ECECEC;
			border-radius: 8px;
			width: 100%;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
		}
		
		
	}
</style>
